import React, { useCallback, useEffect, useState } from 'react';
import Base from './base';
import { Common } from 'UtilsCommon';
import { Popover, Input } from 'antd-mobile';
import { SketchPicker } from 'react-color';
import { Icon } from 'Configs';

const valueChange = (property, value) => {
    if (property.valueChange) property.valueChange(value, property);
};

const renderLabel = (label2, isAddColon, isRed2) => {
    return <div className='divLabel'>
        {isRed2 ? <span className='spRed' style={{ color: 'red' }}>*</span> : ''}
        <span dangerouslySetInnerHTML={{ __html: label2 + (isAddColon ? '：' : '') }}></span>
    </div>;
};

export default (props) => {
    const { property } = Base.getProps(props);
    const [value, setValue] = useState(Base.getInitValue(property));
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);
    const [disabled, setDisabled] = useState(!!property.disabled);
    const [isReadOnly, setIsReadOnly] = useState(!!property.isReadOnly);
    const [, setRefresh] = useState('');

    const onChange = useCallback((v) => {
        property.isChanged = true;
        setValue(v);
        Base.bindDataValue(property, v);
    }, [property, setValue]);

    useEffect(() => {
        valueChange(property, value);
    }, [property, value]);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
    property.setValue = (v) => setValue(v);
    property.getValue = () => Base.getValue(property, value);
    property.setDisabled = (v) => setDisabled(v);
    property.setIsReadOnly = (v) => setIsReadOnly(v);
    property.setRefresh = () => setRefresh(Common.createGuid());

    if (!isVisible) return null;

    const { label, clear, isRed, isValueVisible, cssTemplate, isAddColon } = property;
    let isNullable = property.isNullable;

    if (isValueVisible && !value) return null;

    const className = property.className;

    const cNames = [];
    if (className) cNames.push(className);
    if (cssTemplate) cNames.push(cssTemplate.cssName);

    let clear2 = clear === undefined ? true : clear;
    if (isReadOnly || disabled) clear2 = false;

    property.placeHolder = property.placeHolder || (isNullable ? '选填' : '请输入');

    let isRed2 = property.isRed2 || (isNullable === false && isRed);
    if (isReadOnly) {
        isRed2 = false;
        isNullable = true;
        property.placeHolder = '';
    }

    const label2 = property.isLabel === false ? '' : label;

    const value2 = Common.isNullOrEmpty(value) ? '' : value;

    const color = value || '#000000';

    return <div className={cNames.join(' ')} style={Base.setStyle(property.style)}>
        {label2 && renderLabel(label2, isAddColon, isRed2)}
        <div className='divInput'>
            <Input placeholder={property.placeHolder}
                onChange={onChange}
                maxLength={50}
                readOnly={isReadOnly}
                disabled={disabled && !isReadOnly}
                clearable={clear2}
                value={value2}></Input>
            <Popover trigger="click" placement="bottom" content={<SketchPicker color={color} onChangeComplete={({ hex }) => setValue(hex)} />}>
                <div className='divColorView'>
                    <div className='divColor' style={{ backgroundColor: value }}></div>
                    <Icon type="down" />
                </div>
            </Popover>
        </div>

    </div>;
};